<template>
  <div class="echartsChart">
    <div class="echartsChart-left">
      <div class="chart" ref="chart1"></div>
      <div class="chart" ref="chart2"></div>
    </div>
    <div class="chart3" ref="chart3"></div>
  </div>
</template>

<script lang="ts" setup>
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue'
import initChar1 from '@/echarts/pieChart'
import initChar2 from '@/echarts/barChart'
import initChar3 from '@/echarts/lineChart'

const chart1 = ref()
const chart2 = ref()
const chart3 = ref()
onMounted(() => {
  initChar1(echarts.init(chart1.value))
  initChar2(echarts.init(chart2.value))
  initChar3(echarts.init(chart3.value))
})
</script>
<style lang="scss" scoped>
.echartsChart {
  display: flex;
  padding: 15px;
  .echartsChart-left {
    width: 50%;
    padding-right: 30px;
    .chart {
      width: 100%;
      height: 41vh;
      background-color: var(--bgColor);
      padding: 15px;
      &:first-child {
        margin-bottom: 30px;
      }
    }
  }
  .chart3 {
    width: 50%;
    padding: 15px;
    height: calc(82vh + 30px);
    background-color: var(--bgColor);
  }
}
</style>
